<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html lang="en" style="overflow-x: hidden; overflow-y: auto;">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>相册素材模板</title>
    <link href="<%=path%>/css/material/style.css" rel="stylesheet">
  <link rel="stylesheet" href="<%=path%>/css/material/fullpage.min.css">
</head>
<body>
  <div class="content-wrap">
    <!-- 相册内容，后端提供 -->
    <div id="dowebok">
      <div class="section fp-auto-height collectInfo">
        <div class="tmpt-wrap">
          <!-- department info -->
          <div class="department-index intent">
                                       参与门店
              <img class="intent" src="<%=path%>/images/aem/shop.png" />
          </div>
          <!-- input-info -->
          <div class="form">
            <div class="item">
              <p class="label-wrap">
                <span class="check-icon">*</span>
                <span class="text">姓名</span>
              </p>
              <input class="input" type="text">
            </div>
            <div class="item">
              <p class="label-wrap">
                <span class="check-icon">*</span>
                <span class="text">手机</span>
              </p>
              <input class="input" type="text">
            </div>
            
            <div class="btn submit">提交</div>
          </div>
          <!-- qrcode-info -->
         <div class="qrcode-wrap">
	         <img id="qrcode" style="width: 90px;height: 90px">
	         <p class="text" id="qrcodeText" style="font-size: 16px;"></p>
		 </div>
        </div>
      </div>
    </div>
  </div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  <script src="<%=path%>/js/aem/client/scrolloverflow.min.js"></script>
  <script src="<%=path%>/js/material/fullpage.min.js"></script>
  <script src="<%=path%>/js/material/rem.js"></script>
  <script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
  <script>
      //初始化原始editor中的数据图片。压缩宽度到100%，高度自动
      $(".content-wrap").find('img').css("max-width", "100%");
      $(".content-wrap").find('img').css("height", "auto");
      $(".content-wrap").find('video').css("max-width", "100%");
      $(".content-wrap").find('video').css("height", "auto");

    function toDepartList() {
      window.location.href = 'department.html';
    }
	var aemInfoHtmlPath="";
	var aemInfoVirPath="";
	var cid =null;
    var buttonSumitText = "提交";
    var buttonSumitColor = "";
    //预览id
    var previewId = 0;
    //素材id
    var materialId = 0;
    
    // cid
    var cid ="";
    // 全屏滑动页面
    $(function () {
        previewId = getQueryString("id"); 
    	materialId = getQueryString("materialId"); 
    	cid = getQueryString("cid"); 
    	console.log(previewId);
    	if(StringEmpty(materialId)){
    		getMaterialInfo();
    	}
    	if(StringEmpty(previewId)){
    		getMaterialPerviewInfo();
    	}
    });

    /* 根据素材id获取素材信息 */
    function getMaterialInfo(){
    	var url="<%=path%>/material/ajaxGetMaterialDetail";
    	$.post(url, {
            "id": materialId,
            "cid": cid,
        }, function (data) {
            if (data.status == "200") {
            	initView(data.data);
            } else {
            	errorDialog(data.message);
            }
        });
    }
    /* 根据素材预览id获取素材信息 */
    function getMaterialPerviewInfo(){
    	var url="<%=path%>/material/ajaxGetMaterialPreviewInfo";
    	$.post(url, {
            "previewId": previewId,
        }, function (data) {
            if (data.status == "200") {
            	initView(data.data);
            } else {
            	errorDialog(data.message);
            }
        });
    }
    
    /* 获取页数 */
    function getPageInfo(){
    	var url="<%=path%>/material/ajaxGetMaterialPhotoPageDetail";
    	$.post(url, {
            "materialId": materialId,
            "cid": cid,
        }, function (data) {
            if (data.status == "200") {
            	var html = "";
            	var contentPageArray=data.data;
            	var html = '';
            	for(var i in contentPageArray){
            		if(!StringEmpty(contentPageArray[i].content)){
            			continue ;
            		}
            		if(i == contentPageArray.length-1){
            			html += '<div style="padding:3%" class="section pageInfo fp-auto-height">'+contentPageArray[i].content+'</div>';
            		}else{
            			html += '<div style="padding:3%" class="section pageInfo">'+contentPageArray[i].content+'</div>';
            		}
            		
            	}
            	$('#dowebok').prepend(html);
            	$(".pageInfo").find('img').css("width","100%");
    			$(".pageInfo").find('img').css("height","");
            	$('#dowebok').fullpage({
                    paddingBottom: 0,
                    navigation: false,
                    scrollOverflow: true,
                    licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                  });
            } else {
            	console.log("getPageInfo()--->"+data.message);
            }
        });
    }
    
    
    function initView(materialInfo){
    	var storeIds = materialInfo.storeIds;
    	cid = materialInfo.cid;
    	buttonSumitText = materialInfo.buttonSumitText;
    	buttonSubmitColor = materialInfo.buttonSubmitColor;
    	if(StringEmpty(storeIds)){
    		ajaxGetAemFgDomainInfo();
    		getStoreList(storeIds);
    	}else{
    		$('.department-index').hide();
    	}
    	var isNeedCollect = materialInfo.isNeedCollect;
    	if(isNeedCollect == 1){
    		if(StringEmpty(materialInfo.id)){
        		getCollectInfo(materialInfo.id);
        	}
    	}else{
    		$('.collectInfo').hide();
    		$('.qrcode-wrap').hide();
    	}
    	if(StringEmpty(materialInfo.successPageId)){
    		getSuccessPageInfo(materialInfo.successPageId);
    	}else{
    		$('#qrcode').hide();
    	}
    	var pageInfo = materialInfo.pageInfo;
    	console.log(pageInfo);
    	if(StringEmpty(pageInfo)){
    		var pageInfoArr = pageInfo.split(",");
    		var html = '';
        	for(var i in pageInfoArr){
        		if(!StringEmpty(pageInfoArr[i])){
        			continue ;
        		}
        		if(i == pageInfoArr.length-1){
        			html += '<div style="padding:3%" class="section pageInfo fp-auto-height">'+pageInfoArr[i]+'</div>';
        		}else{
        			html += '<div style="padding:3%" class="section pageInfo">'+pageInfoArr[i]+'</div>';
        		}
        	}
        	$('#dowebok').prepend(html);
        	$(".pageInfo").find('img').css("width","100%");
			$(".pageInfo").find('img').css("height","");
        	$('#dowebok').fullpage({
                paddingBottom: 0,
                navigation: false,
                scrollOverflow: true,
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
            });
    	}else{
    		getPageInfo();
    	}
    }
    
    function getCollectInfo(id){
    	var url="<%=path%>/material/ajaxListCollectField";
    	$.post(url, {
            "mgiId": id,
            "cid" : cid,
        }, function (data) {
            if (data.status == "200") {
            	intCollectView(data.data);
            } else{
            	if(StringEmpty(buttonSumitText)){
            		$('.submit').html(buttonSumitText);
            	}
            }
        });
    }
    
    function intCollectView(collectInfo){
    	var html="";
    	for(var i in collectInfo){
    		html += '<div class="item">';
    		html += '<p class="label-wrap">';
    		if(collectInfo[i].required == 1){
    			html += '<span class="check-icon">*</span>';
    		}
    		html += '<span class="text">'+collectInfo[i].fieldName+'</span></p>';
    		html += '<input class="input" type="text"></div>';
    		
    		if(collectInfo[i].needVerify == 1){
    			html += '<div class="item">';
    			html += '<p class="label-wrap"></p>';
    			html += '<input class="input phone-code" type="text" placeholder="请输入验证码"><div class="btn send-code">发送验证码</div>';
    			html += '</div>';
    		}
    	}
    	if(StringEmpty(buttonSumitText)){
    		if(StringEmpty(buttonSubmitColor) && buttonSubmitColor != '#000000'){
    			html += '<div class="btn submit" style="background-color:'+buttonSubmitColor+'">'+buttonSumitText+'</div>';
    		}else{
    			html += '<div class="btn submit">'+buttonSumitText+'</div>';
    		}
    	}else{
    		html += '<div class="btn submit">提交</div>';
    	}
    	$('.form').html(html);
    }
    
    function getStoreList(storeIds){
    	var url="<%=path%>/store/findListByDto";
    	$.post(url, {
            "ids": storeIds,
        }, function (data) {
            if (data.status == "200") {
            	var storeList = data.data;
            	var html='';
            	$('#storeNum').html(storeList.length);
    	    	$("#storeName").html(storeList[0].name);
    	    	$("#storeAddress").html(storeList[0].address);
            } else {
            	$('.info').hide();
            }
        });
    }
    /* 获取成功页 */
    function getSuccessPageInfo(successPageId){
    	var url="<%=path%>/material/ajaxGetMaterialSuccessPageDetail";
    	$.post(url, {
            "id": successPageId,
            "cid" : cid,
        }, function (data) {
            if (data.status == "200") {
            	var qrcodeImg = data.data.qrcodePic;
            	var qrcodeText = data.data.qrcodeText;
            	var isShowQrcode = data.data.isShowQrcode;
            	if(isShowQrcode == 0){
            		$('#qrcode').hide();
            		return ;
            	}
            	$('#qrcode').attr("src",qrcodeImg);
                $('#qrcodeText').html(qrcodeText);
            	/* jQuery('.qrcodeImg').qrcode({
                    render: "canvas", //也可以替换为table
                    width: 90,
                    height: 90,
                    text:qrcodeImg/*可以通过ajax请求动态设

                });
        		var mycanvas1=document.getElementsByTagName('canvas')[0];
        		//将转换后的img标签插入到html中
        	    var image = new Image();
        	    image.src = mycanvas1.toDataURL("image/png");
        	    $('#qrcode').append(image);//imagQrDiv表示你要插入的容器id
        	    console.log("image--------->"+image);
        	    $('#qrcodeText').html(qrcodeText); */
            } else {
            	$('#qrcode').hide();
            }
        });
    }
    /* 获取h5前端服务的域名*/
    function ajaxGetAemFgDomainInfo(){
 	   var url="<%=path%>/material/ajaxGetAemFgDomainInfo";
    	   $.post(url, {
        }, function (data) {
            if (data.status == "200") {
         	    aemInfoHtmlPath=data.data.aemInfoHtmlPath;
         		aemInfoVirPath=data.data.aemInfoVirPath;
            }
        });
     }
     $('.intent').click(function(){
     	var url = aemInfoHtmlPath+"/department.html?cid="+cid+"&mgiId="+materialId+"&host="+encodeURI(aemInfoVirPath);
     	window.location.href=url;
     });
  </script>
</body>
</html>